<template>
<div id="main"></div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: "scroll",
    mounted() {
      const myChart = echarts.init(document.getElementById('main'), 'chalk');
      //document.getElementById('main')可以更换为this.$el
      const option = {
        title: {
          text: '浏览器占比变化',
          subtext: '纯属虚构',
          top: 10,
          left: 10
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,250,0.2)'
        },
        legend: {
          type: 'scroll',
          bottom: 10,
          /*data: (function (){
            var list = [];
            for (var i = 1; i <=28; i++) {
              list.push(i + 2000 + '');
            }
            return list;
          })()*/
        },
        visualMap: {
          top: 'middle',
          right: 10,
          color: ['red', 'yellow'],
          calculable: true
        },
        radar: {
          indicator: [
            { text: 'IE8-', max: 400},
            { text: 'IE9+', max: 400},
            { text: 'Safari', max: 400},
            { text: 'Firefox', max: 400},
            { text: 'Chrome', max: 400}
          ]
        },
        series: (function (){
          var series = [];
          for (var i = 1; i <= 20; i++) {
            series.push({
              name: '浏览器（数据纯属虚构）',
              type: 'radar',
              symbol: 'none',
              lineStyle: {
                width: 1
              },
              emphasis: {
                areaStyle: {
                  color: 'rgba(0,250,0,0.3)'
                }
              },
              data: [{
                value: [
                  (40 - i) * 10,
                  (38 - i) * 4 + 60,
                  i * 5 + 10,
                  i * 9,
                  i * i /2
                ],
                name: i + 2000 + ''
              }]
            });
          }
          return series;
        })()
      };
      myChart.setOption(option); //渲染
    }
    }
</script>

<style scoped>
  #main {
    height: 100%;
    width: auto;
  }
</style>
